Adwaita: correctly order backdrop decoration node shadows
authorLapo Calamandrei <calamandrei@gmail.com>
Sat, 19 Mar 2016 16:08:17 +0000 (17:08 +0100)
committerLapo Calamandrei <calamandrei@gmail.com>
Sat, 19 Mar 2016 16:08:17 +0000 (17:08 +0100)
... otherwise setting a transition to the backdrop state will make
the window resize, since the shadows size gets interpolated.

gtk/theme/Adwaita/_common.scss
gtk/theme/Adwaita/gtk-contained-dark.css
gtk/theme/Adwaita/gtk-contained.css

index 72c07e2bd5155aa7fd87173d362c8089819c75ca..d7db690dc4136766d2e00f7c95a3afb7fb419f71 100644 (file)
@@ -4030,15 +4030,16 @@ decoration {
 
   // FIXME rationalize shadows
 
-  /* this is used for the resize cursor area */
+  // this is used for the resize cursor area
   margin: 10px;
 
   &:backdrop {
-    /* the transparent shadow here is to enforce that the shadow extents don't
-     * change when we go to backdrop, to prevent jumping windows
-     */
-    box-shadow: 0 2px 6px 2px transparentize(black, 0.8),
-                0 3px 9px 1px transparent,
+    // the transparent shadow here is to enforce that the shadow extents don't
+    // change when we go to backdrop, to prevent jumping windows.
+    // The biggest shadow should be in the same order then in the active state
+    // or the jumping will happen during the transition.
+    box-shadow: 0 3px 9px 1px transparent,
+                0 2px 6px 2px transparentize(black, 0.8),
                 0 0 0 1px $_wm_border_backdrop;
   }
 
index 33b52596927f7ef3ee1d70a0bdf2a90c50968df0..f082b9f0b35f3bd8b9ffc371b86b25d2b9561e2a 100644 (file)
@@ -4013,13 +4013,9 @@ decoration {
   border-radius: 7px 7px 0 0;
   border-width: 0px;
   box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(28, 31, 31, 0.9);
-  /* this is used for the resize cursor area */
   margin: 10px; }
   decoration:backdrop {
-    /* the transparent shadow here is to enforce that the shadow extents don't
-     * change when we go to backdrop, to prevent jumping windows
-     */
-    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 9px 1px transparent, 0 0 0 1px rgba(28, 31, 31, 0.9); }
+    box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(28, 31, 31, 0.9); }
   .fullscreen decoration, .tiled decoration {
     border-radius: 0; }
   .popup decoration {
index 1eafe377b028ba8a1750830d40f4b63ebe29ad73..65f4dea810fad6852e88a891fe8c58e94b88911e 100644 (file)
@@ -4041,13 +4041,9 @@ decoration {
   border-radius: 7px 7px 0 0;
   border-width: 0px;
   box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23);
-  /* this is used for the resize cursor area */
   margin: 10px; }
   decoration:backdrop {
-    /* the transparent shadow here is to enforce that the shadow extents don't
-     * change when we go to backdrop, to prevent jumping windows
-     */
-    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 9px 1px transparent, 0 0 0 1px rgba(0, 0, 0, 0.18); }
+    box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); }
   .fullscreen decoration, .tiled decoration {
     border-radius: 0; }
   .popup decoration {